<template>
<div>
  <div class="text-h4 tw-mb-4 tw-m-5" style="padding-left: 3px;border-left: 5px solid #3370FF;" >
    教师信息
  </div>
  <div v-if="teachers">
    <q-table
      class="q-ma-md tw-border"
      flat
      style="max-height: 80vh;min-height:80vh;overflow:  hidden;overflow-y: auto"
      :rows="teachers"
      :columns="columns"
      rows-per-page-label="每页显示"
      :rowsPerPage="10"
      :rows-per-page-options="[  10, 15, 20, 25, 50, 0 ]"
      row-key="tid"
      @row-click="(evt,row,index) => {rowClick(row)}"
    >
    </q-table>
  </div>
</div>
</template>

<script setup>
import {onMounted, ref} from "vue";
import {api} from "boot/axios";
import {useQuasar} from "quasar";
import TeacherConfig from "components/TeacherConfig.vue";

let teachers = ref([]);
let info = JSON.parse(localStorage.getItem("info"))
api({
  url: "/job/teacher/getdeptteacher?"+new URLSearchParams({dept:info.dept}),
  method: "get"
}).then(res => {
  let data = res.data
  if(data.code===200){
    teachers.value = data.data
  }else{
    console.log(data.msg)
  }
})
const $q = useQuasar();

let rowClick = (row) => {
  $q.dialog({
    component:TeacherConfig,
    componentProps:{
      teacher:row
    },
    title:'教师详情',
    ok: '确定',
    cancel: '取消',
    html: true,
    persistent: true
  })
}



const columns = [
  {
    name:'tname',
    label:'教师姓名',
    field:row => row.tname
  },
  {
    name:'age',
    label:'年龄',
    field:row => row.age
  },
  {
    name: 'dept',
    label: '所属院系',
    field: row => row.dept
  },
  {
    name:'email',
    label:'邮箱',
    field:row => row.email
  },
  {
    name:'tel',
    label:'电话',
    field:row => row.tel
  },
  {
    name:'ttile',
    label:'职称',
    field:row => row.ttile
  },
  {
    name:'qq',
    label:'qq',
    field:row => row.qq
  },
  {
    name:'location',
    label:'办公室',
    field:row => row.location
  },
  {
    name:'project_num',
    label:'课题数',
    field:row => row.project_num
  }
]


</script>

<style scoped>

</style>
